<template>
  <Pager>

    <Panel title="Search Criteria">

      <template #buttons>
        <el-button icon="el-icon-search" class="blue">Search</el-button>
      </template>

      <el-form class="padding-1" label-position="top">
        <div class="flex-h" style="width: 600px">
          <el-form-item class="flex-1" label="用户名">
            <el-input/>
          </el-form-item>
          <el-form-item class="flex-1 margin-left-2" label="密码">
            <el-input type="password"/>
          </el-form-item>
        </div>
      </el-form>

    </Panel>

    <div class="margin"></div>

    <Panel title="User List" class="margin-top-1">
      <template #buttons>
        <el-button icon="el-icon-search" class="red">asd</el-button>
      </template>

      <vxe-table stripe
                 border
                 highlight-current-row
                 highlight-hover-row
                 :data="tableData">
        <vxe-column type="seq" title="Seq" width="60"></vxe-column>
        <vxe-column field="name" title="Name"></vxe-column>
        <vxe-column field="role" title="Role"></vxe-column>
        <vxe-colgroup title="Group1">
          <vxe-column field="sex" title="Sex"></vxe-column>
          <vxe-column field="address" title="Address"></vxe-column>
        </vxe-colgroup>
      </vxe-table>
      <vxe-pager
          perfect
          size="mini"
          :loading="false"
          :current-page="8"
          :page-size="16"
          :total="300"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
          @page-change="">
      </vxe-pager>

    </Panel>
  </Pager>
</template>

<script lang="ts">
import {defineComponent, ref} from 'vue'
import Pager from "@/component/Pager.vue";
import Panel from "@/component/Panel.vue";

export default defineComponent({
  name: 'User',
  components: {Panel, Pager},
  setup() {
    const tableData = ref([
      {id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', address: 'Shenzhen'},
      {id: 10002, name: 'Test2', role: 'Test', sex: 'Man', address: 'Guangzhou'},
      {id: 10003, name: 'Test3', role: 'PM', sex: 'Man', address: 'Shanghai'}
    ])
    return {
      tableData
    }
  }
})
</script>

<style scoped>

</style>